<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    * {
        z-index: -1;
    }

    .an {
        background-color: black;
        opacity: 0.1;
    }

    .abc {
        height: 0;
        width: 0;

        display: block;
        /*border: 2px solid #f40;*/
        float: right;
        background: red;
        z-index: 1;
    }
</style>
<script>
    function cancal_zhezhao(e) {
        $("#abc").animate({width: "0"}, "slow");
        $(".container").children().each(function (i, e) {
            $(e).removeClass("an")
        });
        return false
    }

    function cancal_autoHide(e) {
        var thistype = $(e.target).attr("type");
        if (thistype != "button") {
            console.log(111)
            $("#autoHide").popover('hide');
            $(".container").unbind(e);
        }
//                $(document).unbind("click");
        e.stopPropagation(); // 阻止冒泡
        return false
    }

    $(document).ready(function () {
        var windowHight = window.innerHeight;
        var windowWidth = window.innerWidth;

        console.log(windowHight, windowWidth);
        $("#abc").css({"height": windowHight - windowHight * 0.2});

// todo 显示 弹层
        $("#showCeng").click(function (e) {
//     整个可视区域变暗
            console.log($("#abc").width())
            if ($("#abc").width() == 0) {

//                $("#abc").css("display", "block");
                $("#abc").animate({width: "500px"}, "slow");

                console.log(111)
                $("#all").css({"height": windowHight, "width": windowWidth});
                $(".container").children().each(function (i, e) {
                    $(e).addClass("an")
                });
                $(".btn").popover("hide"); //打开弹层的时候，关闭所有提示框
                $(".container").bind("click", function (e) { // 监听点击 遮罩层外的地方  ，关闭遮罩
                    cancal_zhezhao(e)
                })

            } else {
                $("#abc").animate({width: "0"}, "slow");
                $(".container").children().each(function (i, e) {
                    $(e).removeClass("an")
                });
                $(".container").unbind(e)
            }

        });


        $('#autoHide').click(function (obj) { // 显示弹出框的时候 自动添加事件
            console.log("添加点击空白处关闭提示框");
            $("#autoHide").popover("show");
            $(".container").bind("click", function (e) {
                cancal_autoHide(e)
            });
        });


        $(function () {
            $('.popover-show').popover();
        });
        $(function () {
            $('.popover-hide').popover('show');
        });
        $(function () {
            $('.popover-destroy').popover('destroy');
        });
//        $(function () {
//            $('#autoHide').popover();
//        });
        $(function () {
            $(".popover-options a").popover({html: true});
        });
    })

</script>
<body>

<div id="all">
    <div id="showCeng" class="btn btn-success">显示/隐藏 遮罩层,背景变暗</div>
    <!--遮罩层占用元素-->
    <div id="abc" class="abc"></div>
    <div class="container" style="padding: 100px 50px 10px">
        <button type="button" class="btn btn-default popover-show"
                title="Popover title" data-container="body" data-trigger="hover"
                data-toggle="popover" data-placement="left"
                data-content="左侧的 Popover 鼠标hover">
            左侧的 Popover
        </button>
        <button type="button" class="btn btn-primary popover-hide"
                title="Popover title" data-container="body"
                data-toggle="popover" data-placement="top"
                data-content="顶部的 Popover 中的一些内容 —— hide 方法">
            点击改变显示隐藏
        </button>
        <button id="autoHide" type="button" class="btn btn-warning"
                title="Popover title" data-container="body"
                data-toggle="popover" data-placement="bottom"
                data-content=" 点击空白处自动关闭">
            点击空白处自动关闭
        </button>

        <button type="button" class="btn btn-warning popover-toggle"
                title="Popover title" data-container="body"
                data-toggle="popover" data-placement="right"
                data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
            右侧的 Popover
        </button>
        <br><br><br><br><br><br>
        <p class="popover-options">
            <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
               data-container="body" data-toggle="popover" data-trigger="focus" data-content="
																	 <h4>Popover 中的一些内容 —— options 方法</h4>">
                Popover
            </a>
        </p>

    </div>
</div>
</body>
</html>